import React from 'react';
import { Menu, Icon, Avatar, Badge } from 'antd';
import { connect } from 'react-redux'
import { getUserInfo} from '@/api/Api.js'

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

const mapStateToProps = (state, ownProps) => ({
	userInfo: state.common.userInfo,
})

// const mapDispatchToProps = (dispatch, ownProps) => ({
// 	// changeTabNav: key => dispatch(changeTabNav(key)),
// 	// removeTabNav: key => removeTabNav(removeTabNav(key))
// })

class HeaderNav extends React.Component {
	state = {
		current: '',
	}
	handleClick = (e) => {
		// this.setState({
		// 	// current: e.key,
		// });
	}
	componentDidMount() {
		getUserInfo();
	}
	render() {
		return (
			<Menu
				onClick={this.handleClick}
				selectedKeys={[this.state.current]}
				mode="horizontal"
				className='header-nav'
			>
				<SubMenu className='userInfo' title={<span><Icon style={{marginRight:0,fontSize:16}} type="bell" />  <sup><Badge count={99}></Badge></sup></span>}>
					<MenuItemGroup title="待办事项">
						<Menu.Item key="userInfo:1">
							<span><Icon style={{marginRight:0}} type="bars" /> 待办事项 <sup><Badge count={50}></Badge></sup></span>
						</Menu.Item>
					</MenuItemGroup>
					<MenuItemGroup title="bug管理">
						<Menu.Item key="userInfo:3">
							<span><Icon style={{marginRight:0}} type="tags" /> 新bug <sup><Badge count={49}></Badge></sup></span>
						</Menu.Item>
					</MenuItemGroup>
				</SubMenu>
				<SubMenu className='userInfo' title={<span>欢迎你，{this.props.userInfo.nickname}  <sup style={{top:'-0.25em',marginLeft:5}}><Icon style={{fontSize:12}} type="caret-down" /></sup></span>}>
					<MenuItemGroup title="个人信息">
						<Menu.Item key="userInfo:1">编辑信息</Menu.Item>
						<Menu.Item key="userInfo:2">头像修改</Menu.Item>
					</MenuItemGroup>
					<MenuItemGroup title="退出">
						<Menu.Item key="userInfo:3">退出登录</Menu.Item>
					</MenuItemGroup>
				</SubMenu>
				<Menu.Item style={{paddingLeft:0}} key="avatar">
					<Avatar size="large" src={this.props.userInfo.avatar} />
			</Menu.Item>
			</Menu>
		);
	}
}

export default connect(
	mapStateToProps,
	// mapDispatchToProps
)(HeaderNav)